<!-- 主列表页 -->
<template>
  <div>
    <!-- 搜索栏 -->
    <SearchBar @query="queryList" @reset="resetForm" :loading="tableLoading">
      <el-form-item label="搜索条件">
        <FInput v-model.trim="searchData.name" />
      </el-form-item>
      <el-form-item label="启用状态">
        <FSelect v-model="searchData.state" :options="DISABLE"/>
      </el-form-item>
      <el-form-item label="查询时间">
        <FDatePicker v-model="searchData.date" type="daterange" value-format="yyyy-MM-dd" />
      </el-form-item>
    </SearchBar>
    <!-- 按钮容器+导入 -->
    <ButtonImport api="/xxx/xxx" :data="{}" :fileSize="5" template="/xxx/xxx">
      <el-button type="primary" @click="edit('button.Create', null)">{{$t('button.Create')}}</el-button>
      <el-button type="danger" @click="del()" :disabled="selectData.length === 0">{{$t('button.Delete')}}</el-button>
    </ButtonImport>
    <!-- 表格 -->
    <Table v-loading="tableLoading" :handleWidth="210" :data="pageList" columnMark="tableKey-V1" :columns="tableColumns" @select="(list) => {selectData = list}">
      <template slot-scope="scope">
        <a class="mr5 c-primary" @click.stop="edit('button.Details', scope.row)">
          <i class="el-icon-more"></i>
          <span>{{$t('button.Details')}}</span>
        </a>
        <a class="mr5 c-primary" @click.stop="edit('button.Edit', scope.row)">
          <i class="el-icon-edit"></i>
          <span>{{$t('button.Edit')}}</span>
        </a>
        <a class="c-red" @click.stop="del(scope.row)">
          <i class="el-icon-delete"></i>
          <span>{{$t('button.Delete')}}</span>
        </a>
      </template>
    </Table>
    <div>
      <!-- 导出 -->
      <ExportData :params="searchDataParams" :url="'/xxx/xxx'" :list="pageList" :select="selectData" />
      <!-- 分页 -->
      <Pagination @search="getList" :page="page" />
    </div>
    <!-- 新增+编辑 -->
    <Edit @callback="getList" :params="editParams" />
  </div>
</template>

<script>
import mixinIndex from '@/mixin/index'
import Edit from './edit'
import { confirm } from '@/components/dialog/popout'
// import { test } from '@/api/base';
import { DISABLE, DISABLE_FN } from '@/constants/basic-data'

export default {
  mixins: [mixinIndex],
  components: { Edit },
  data() {
    return {
      DISABLE,
      // 表格列 数据如果改变需修改 columnMark 值版本
      tableColumns: [
        { show: true, width: 100, title: 'ID', key: 'id' },
        { show: true, width: 200, title: '名称', key: 'name' },
        { show: true, width: 200, title: '时间', key: 'time', isDate: 'YYYY-MM-DD HH:mm' },
        { show: true, width: 200, title: '金额', key: 'money', isMoney: true },
        { show: true, width: 100, title: '图片', key: 'logo', isImage: { type: 'image' } },
        { show: true, width: 100, title: '图片', key: 'logo', isImage: { type: 'icon' } },
        { show: true, width: 200, title: '开关', key: 'blen', isSwitch: { method: this.changeSwitch } },
        { show: true, width: 100, title: '状态', key: 'state', format: { method: DISABLE_FN } },
        { show: true, width: 100, title: '标签', key: 'tag', isTag: true }
      ]
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 获取列表数据
     * 函数中 getListBefore 必须先调用，处理通用字段
     * 包含了查询函数分页字段，数据列表，loading状态
     */
    getList() {
      this.page.total = 4 // 总条数
      this.page.currPage = 1 // 当前页
      this.page.limit = 5 // 每页多少条
      this.pageList = [
        { id: 1, name: 'name1', time: new Date(), state: 1, blen: 1, tag: 1, money: 120000, remark: '', logo: 'https://www.baidu.com/img/flexible/logo/pc/result@2.png' },
        { id: 2, name: 'name2', time: new Date(), state: 0, blen: 0, tag: 2, money: 120000, remark: '', logo: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg' },
        { id: 3, name: 'name3', time: new Date(), state: 0, blen: 1, tag: 3, money: 120000, remark: '', logo: 'https://www.baidu.com/img/flexible/logo/pc/result@2.png' },
        { id: 4, name: 'name4', time: new Date(), state: 1, blen: 1, tag: 0, money: 120000, remark: '', logo: 'https://www.baidu.com/img/flexible/logo/pc/result@2.png' }
      ]
      /* this.getListBefore();
      test(this.searchDataParams).then((res) => {
        this.page = res.data.page;
        this.pageList = res.data.list;
      }).finally(() => {
        this.tableLoading = false;
      }); */
    },
    /**
     * 开关切换
     * @param {Number} newValue
     * @param {Object} row
     * @param {Number} index
     */
    changeSwitch(newValue, row, index) {},
    /**
     * 删除
     * @param {Object} row
     */
    del(row) {
      confirm(this.$t('message.The deletion is unrecoverable Do you want to delete it'), null, true).then(() => {
        /* methodPost('/xxx/xxx', {ids: []}).then((res) => {
          this.$message.success(this.$t('message.Success'))
          this.getList()
          }
        }) */
      }).catch(() => {})
    }
  }
}
</script>
